<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>menu</title>
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
      height: 34px;
      line-height: 34px;
      padding: 0 8px;
    }
     .layui-table-cell img{
       text-align: center;
       height: auto;
       width: auto;
       white-space: normal;
       max-height: 25px;
       max-width: 50px;
       border: 1px solid salmon;
     }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索分类信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label  class="layui-form-label">关键词</label>
              <div class="layui-input-inline">
                <input id="keyword" type="text"  autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <br>

    <div>
      <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
        <button class="layui-btn layui-btn-normal" id="btn-top">增顶级分类</button>
      </div>
      <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
    </div>
  </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">增下级</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 定义新增时弹出窗口的模板 -->
<script type="text/html" id="classifyTempLate">

  <form class="layui-form" lay-filter="classifyForm">

    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-inline">

        <input id="id" type="hidden"  name="id" >
        <input id="parentId" type="hidden"  name="parentId" >

        <input id="classifyName" type="text" name="classifyName" autocomplete="off" placeholder="" class="layui-input">
      </div>
    </div>
    <!--        <div class="layui-input-block" style="width: 230px ;margin-left: 4px">-->
    <!--            <input value="${item.icon!}" type="text" id="iconPicker" lay-filter="iconPicker" class="hide" lay-verify='required' >-->
    <!--            <input id="icon" name="icon" class="layui-input" value="${item.icon!}">-->
    <!--        </div>-->

    <div class="layui-inline">
      <label class="layui-form-label">分类图片</label>
      <div class="layui-input-inline">
        <img id="imgPath" width="50px" height="50px" src="">
        <input type="hidden" name="imgPath" id="classifyImgPath">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
          <input id="sequence" type="text" name="sequence"  autocomplete="off" class="layui-input demo-phone">
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="saveBtn" type="button" class="layui-btn">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script th:inline="none">
  layui.use(['table', 'treetable','layer','common','form','upload'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var treetable = layui.treetable;
    var layer=layui.layer;
    var form=layui.form;
    var upload = layui.upload;
    // var iconPicker = layui.iconPickerFa;


    // 渲染表格
    layer.load(2);

    $('#btn-fold').click(function () {
      treetable.foldAll('#munu-table');
    }).click();

    $("#serachBtn").on("click", function() {
      tablerender();
    });
    var tablerender=function (){
      treetable.render({
        treeColIndex: 1,
        treeSpid: 0,
        treeIdName: 'id',
        treePidName: 'parentId',
        elem: '#munu-table',
        where:{keyword:$("#keyword").val()},
        url: '/waresclassify/list',
        page: false,
        cols: [[
          {type: 'numbers'},
          {field: 'classifyName',  title: '商品分类名称'},
          {
            field : 'imgPath',
            title : '分类图片',
            templet: '<div><img src="{{d.imgPath}}"></div>'
          },
          {field: 'sequence',  align: 'center', title: '排序号'},
          {templet: '#auth-state',  align: 'center', title: '操作'}
        ]],
        done: function () {
          layer.closeAll('loading');
        }
      });
    };

    tablerender();

    $('#btn-expand').click(function () {
      treetable.expandAll('#munu-table');
    });

    //保存按钮绑定事件
    $("body").on("click","#saveBtn", function() {
      var data = form.val("classifyForm");
      $.post("/waresclassify/save", data, function() {
        tablerender();
        layer.closeAll();
      });
    });


    //监听工具条
    table.on('tool(munu-table)', function (obj) {
      var data = obj.data;
      var layEvent = obj.event;
      if (layEvent === 'del') {
        layer.confirm("确认删除该分类信息吗？",function () {
          $.post("/waresclassify/del?id="+data.id,function(m){
            //重新渲染表格
            tablerender();
            //关闭窗口
            layer.closeAll();
            //错误提示
            layer.msg(m.msg);
          });
        })
      } else if (layEvent === 'edit') {
        $.get("/waresclassify/"+data.id,function (m){
          layer.open({
            type:1,
            area:['450px','450px'],
            title:"编辑分类信息",
            content:$("#classifyTempLate").html()
          });
          form.render();
          $("#imgPath").attr("src", m.imgPath);
          form.val("classifyForm",m);
          upload.render({
            elem: '#imgPath' //绑定元素
            ,url: '/waresclassify/avatar' //上传接口
            ,done: function(res){
              if(res.code==0){
                $("#classifyImgPath").val(res.data.imgPath);
                $("#imgPath").attr("src",res.data.imgPath);
              }
            }
            ,error: function(){
              //请求异常回调
            }
           });
        });
      }else if (layEvent === "add") {
        layer.open({
          type:1,
          area:['450px','450px'],
          title:"新增子分类",
          content:$("#classifyTempLate").html()
        });
        form.render();
        upload.render({
          elem: '#imgPath' //绑定元素
          ,url: '/waresclassify/avatar' //上传接口
          ,done: function(res){
            if(res.code==0){
              $("#classifyImgPath").val(res.data.imgPath);
              $("#imgPath").attr("src",res.data.imgPath);
            }
          }
          ,error: function(){
            //请求异常回调
          }
        });
        //把当前行的id放到弹出窗口的父id里
        $("#parentId").val(data.id);

      }
    });

    //给增顶级菜单绑定事件
    $("#btn-top").on("click",function (){
      layer.open({
        type:1,
        area:['450px','450px'],
        title:"新增顶级分类信息",
        content:$("#classifyTempLate").html()
      });
      form.render();
      upload.render({
        elem: '#imgPath' //绑定元素
        ,url: '/waresclassify/avatar' //上传接口
        ,done: function(res){
          if(res.code==0){
            $("#classifyImgPath").val(res.data.imgPath);
            $("#imgPath").attr("src",res.data.imgPath);
          }
        }
        ,error: function(){
          //请求异常回调
        }
      });
      //将父菜单id设置为0
      $("#parentId").val(0);
    });

  });
</script>
</body>
</html>